<template>
	<view class="s-findaa">
		<scroll-view style="display: flex;white-space: nowrap;height: 90rpx;" scroll-x :scroll-into-view="'yy' + act">
			<view style="display: inline-block;font-size: 30rpx;" :id="'yy' + index" v-for="(d, index) in menuList" @click="changeMenu(index,d)" :key="index">
				<text class="menu-title" :class="{ act: act == index }">{{ d.title }}</text>
			</view>
		</scroll-view>
		<swiper :style="{ height: winHeight + 'px' }" @change="changeSwiper" :current="act">
			<swiper-item v-for="(d, index) in menuList">
				<view class="swiper-content" :style="{ height: winHeight + 'px' }">
						<FindAngel v-if="d.title=='天使映象'"></FindAngel>
						<FindLavender v-else-if="d.title=='蔚薰衣草'"></FindLavender>
						<FindHavefun v-else-if="d.title=='蔚游乐区'"></FindHavefun>
						<FindBalloon v-else-if="d.title=='告白气球'"></FindBalloon>
						<uni-nodata v-else></uni-nodata>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import FindAngel from './find-angel'
	import FindLavender from './find-lavender'
	import FindHavefun from './find-havefun'
	
	import FindBalloon from './find-balloon'
export default {
	components:{
		FindAngel,
		FindLavender,
		FindHavefun,
		FindBalloon
	},
	data() {
		return {
			act: 0,
			menuList: [
				{
					title: '天使映象',
					content: '互联网-具体内容..'
				},
				{
					title: '蔚薰衣草',
					content: '探索-具体内容'
				},
				{
					title: '蔚游乐区',
					content: '蔚游乐区-具体内容'
				},
				{
					title: '告白气球',
					content: '告白气球-具体内容'
				},
				{
					title: '国内',
					content: '国内-具体内容'
				},
				{
					title: '科技',
					content: '科技-具体内容'
				},{
					title: '军事',
					content: '军事-具体内容'
				},{
					title: '互联网',
					content: '互联网-具体内容'
				},
			],
		};
	},
	// onLoad() {
		// let _this = this;
		// uni.getSystemInfo({
		// 	success: function(res) {
		// 		console.log(res.windowHeight);
		// 		let height = res.windowHeight * 2; //将px 转换rpx
		// 		_this.winHeight = height - 400 + 'rpx';
		// 		console.log(_this.winHeight);
				// console.log(res.screenHeight); //屏幕高度  注意这里获得的高度宽度都是px 需要转换rpx
				// console.log(res.windowWidth); //可使用窗口宽度
				// console.log(res.windowHeight); //可使用窗口高度
				// console.log(res.screenWidth); //屏幕宽度
				// var rpx = res.screenHeight * (750 / res.windowWidth); //将px 转换rpx
				// console.log(rpx);
			// }
		// });
	// },
	computed: {
		winHeight() {
			return uni.getSystemInfoSync().windowHeight-45;
		}
	},
	onShow() {
		let _this = this;
		uni.getStorage({
			key: 'stitleDate',
			success: function(res) {
				// console.log(res);
				let ind = _this.menuList.findIndex(value => value.title == res.data);
				if (ind != -1) {
					_this.act = ind;
				} else {
					console.log('暂无对应');
				}
			}
		});
	},
	methods: {
		changeMenu(index,d) {
			this.act = index;
			uni.setStorage({
				key: 'stitleDate',
				data: d.title,
				success: function () {
					console.log('success');
				}
			});
		},
		changeSwiper(e) {
			this.act = e.detail.current;
			let title=this.menuList[e.detail.current].title
			uni.setStorage({
				key: 'stitleDate',
				data: title,
				success: function () {
					console.log('success');
				}
			});
		}
	}
};
</script>
<style lang="scss">
.menu-title {
	display: inline-block;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.act {
	color: orange;
	border-bottom: 2px solid orange;
}
.swiper-content {
	// border: 2rpx solid #e4393c;
	box-sizing: border-box;
	overflow: auto;
}
// .find-scroll .uni-scroll-view-content{
// display: flex;
// color: red;
// }
// .s-findaa{
// 	.uni-scroll-view-content{
// 		display: flex;
// 		font-size: 16px;
// 		white-space: nowrap;
// 		.menu-title{
// 			display: inline-block;
// 			height: 80rpx;
// 			line-height: 80rpx;
// 			padding: 0 16rpx;
// 			box-sizing: border-box;
// 		}
// 		.act{
// 			color: orange;
// 			border-bottom: 2px solid orange;
// 		}
// 	}
// }
</style>
